<template>
  <div style="margin:0 auto 30px">
    <div style="background-color: #876c5f;height: 2px"></div>
    <div style="height: 400px;margin-bottom: 40px">
      <el-card class="card">
        <div v-for="fc in category">
          <div style="padding: 0px 7px 0px 18px">
            <p class="firstCategory" style="padding-left: 150px;height: 27px;overflow: hidden">
              <span style="margin-right: 30px"><a href="javascript:void(0)" @click="select(fc.id)">{{ fc.name }} </a></span>
              <span v-for="sc in fc.categoryList">
                  <span class="secondCategory" style="margin-right: 40px;font-size: 15px"><a href="javascript:void(0)" @click="select(sc.id)">{{ sc.name }}</a></span>
                </span>
            </p>
          </div>
        </div>
      </el-card>
    </div>
    <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        @select="handleSelect"
        background-color="#876c5f"
        text-color="#fff"
        active-text-color="#fff"
    style="padding-left: 70px;">
      <el-menu-item index="1">综合排序</el-menu-item>
      <el-menu-item index="2">销量</el-menu-item>
      <el-submenu index="3">
        <template slot="title" style="background-color: white">价格</template>
        <el-menu-item index="3-1" >价格升序</el-menu-item>
        <el-menu-item index="3-2">价格降序</el-menu-item>
      </el-submenu>
      <el-menu-item index="4">最新</el-menu-item>
    </el-menu>
    <div style="width: 1200px;margin:0px auto" v-if="isExistProduct">
      <!--  按分类展示商品开始  -->
      <div>
        <el-row :gutter="20">
          <el-col :span="6" v-for="p in productArr" style="margin-top: 10px;margin-bottom: 10px">
            <el-card style="padding-bottom: 10px">
              <div style="padding: 10px">
                <a :href="'/detail?id='+p.id"><img class="p_img" :src="p.url" width="100%"></a>
              </div>
              <div style="width:100%">
                <a :href="'/detail?id='+p.id" style="color: #3f3f3f;text-decoration: none">
                  <p style="font-size: 15px;margin: 0;height: 30px;padding-left: 20px">{{ p.name }}</p>
                </a>
                <div style="color: #6c6c6c">
                  <span style="margin-left: 20px;color: red;font-weight: bold">￥{{ p.discountPrice }} </span>
                  <span style="font-size: 12px;
                                text-decoration: line-through">{{ p.fixedPrice }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <!--  按分类展示商品结束  -->
    </div>
    <div v-else="isExistProduct">
      <el-empty description="空空如也" style="background-color: white"></el-empty>
    </div>
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      activeIndex: '1',
      category: [],
      productArr: [],
      isExistProduct:true,
      index:''
    }
  },
  created() {
    let categoryUrl = 'http://localhost:8080/categories/showCategory'
    axios.get(categoryUrl).then((response) => {
      let json = response.data
      this.category = json.data
    })
    //得到地址栏中的商品id
    let urlId = location.search.split("=")[1];
    let session_data = JSON.parse(sessionStorage.getItem('_data'));
    if (session_data==null){
      this.index=urlId
    }else {
      this.index=session_data.id
    }
    let productUrl = 'http://localhost:8080/products/getProductsByCategoryId/'+this.index
    axios.get(productUrl).then((response) => {
      let json = response.data
      if (json.data!='') {
        this.isExistProduct=true
        this.productArr = json.data
        const data = {id: this.index};
        sessionStorage.setItem('_data', JSON.stringify(data));
      }else {
        this.isExistProduct=false
      }
    })
  },
  methods: {
    select(id){
      let productUrl = 'http://localhost:8080/products/getProductsByCategoryId/'+id
      axios.get(productUrl).then((response) => {
        let json = response.data
        if (json.data!="") {
          this.isExistProduct=true
          this.productArr = json.data
          const data = {id: id};
          sessionStorage.setItem('_data', JSON.stringify(data));
        }else {
          this.isExistProduct=false
        }
      })
    },
    handleSelect(index) {
      let id = JSON.parse(sessionStorage.getItem('_data')).id
      let productUrl = 'http://localhost:8080/products/getProductsByCategoryIdOrderly/' + id + '/' + index
        axios.get(productUrl).then((response) => {
          let json = response.data
          this.productArr = json.data
        })
    }
  }
}
</script>
<style>
.card {
  border-radius: 0;
}

.firstCategory > span > a {
  text-decoration: none;
  font-size: 20px;
  color: #62605b
}

.secondCategory > a {
  text-decoration: none;
  color: #62605b
}
</style>